<template>
    <view class="index">
        <view class="home-top" hover-class="none" hover-stop-propagation="false">
            <view class="box home-msg" hover-class="none" hover-stop-propagation="false">
                <div>铁拳杂货铺</div>
                <image :src="require('../../assets/images/rwm.png')"></image>
            </view>
        </view>
        <view class="home-context">
            <view class="home-msg" v-for="(item, index) in list" :key="index" @click="handleClick(item)">
                <image bindtap="bindViewTap" data-href="{{item.href}}" :src="item.src"></image>
            </view>
        </view>
    </view>
</template>

<script>
import { reactive, toRefs } from 'vue';
import Taro from '@tarojs/taro'
import { Dongdong } from '@nutui/icons-vue-taro';
export default {
    name: 'Index',
    components: {
        Dongdong
    },
    setup() {
        const state = reactive({
            msg: '欢迎使用 NutUI4.0 开发小程序',
            msg2: '你成功了～',
            type: 'text',
            show: false,
            cover: false,
            list: [
                {
                    src: require('../../assets/images/demo.png'),
                    href: "/index"
                },
                {
                    src: require('../../assets/images/rwm.png'),
                    href: "/index"
                },
                {
                    src: require('../../assets/images/rwm.png'),
                    href: "/index"
                },
                {
                    src: require('../../assets/images/rwm.png'),
                    href: "/index"
                },
            ]
        });

        const handleClick = (listItem) => {
            Taro.switchTab({
                url: listItem.href
            })
        };

        return {
            ...toRefs(state),
            handleClick
        }
    }
}
</script>

<style lang="scss">
@import "../../assets/style/common.scss";

.index {
    font-family: "Avenir", Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
}

.home-top {
    position: relative;
    background: $color url('../../assets/images/home_bg.png');
    background-size: cover;
    height: 400rpx;

    .home-msg {
        display: flex;
        transform: translateY(150%);
        justify-content: space-between;
        align-items: center;

        >div {
            flex: 1;
            padding: 10rpx 40rpx;
            font-size: 60rpx;
            text-align: center;
        }

        image {
            padding: 20rpx;
            width: 140rpx;
            height: 140rpx;
        }
    }
}

.home-context {
    margin-top: 100rpx;
    padding-top: 40rpx;
    height: auto;

    .home-msg {
        height: 250rpx;
        overflow: hidden;
        margin-bottom: 40rpx;

        image {
            width: 100%;
            height: 100%;
        }
    }
}
</style>
